在CSS中，要显示超出部分并添加省略号，可以使用`text-overflow`属性和`white-space`属性来实现。
1. 先设置一个固定宽度的容器，用于显示文本。
```css
.container {
width: 200px; /* 设置容器宽度 */
white-space: nowrap; /* 设置文本不换行 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 显示省略号 */
}
```
2. 然后将文本放入容器中。
```html
Lorem ipsum dolor sit amet
consectetur adipiscing elit. Nullam maximus felis at congue sollicitudin.
```
在这个例子中，容器的宽度为200px，如果文本超出容器宽度，将隐藏超出的部分并添加省略号。
如果你想显示两行超出部分并添加省略号，可以使用`-webkit-box`和`-webkit-line-clamp`属性结合。
```css
.container {
display: -webkit-box; /* 使用弹性盒子布局 */
-webkit-box-orient: vertical; /* 垂直方向布局 */
-webkit-line-clamp: 2; /* 显示的行数 */
max-height: 2.4em; /* 显示的高度 */
width: 200px; /* 设置容器宽度 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 显示省略号 */
}
```
这里的`-webkit-line-clamp`属性限制了显示的行数为2，`max-height`属性限制了显示的高度，当超出部分隐藏后，添加省略号。
```html
Lorem ipsum dolor sit amet
consectetur adipiscing elit. Nullam maximus felis at congue sollicitudin.
```
当文本超出2行时，将隐藏超出部分并添加省略号。
以上是使用CSS来实现在两行超出部分显示省略号的方法，希望对你有帮助。
咨询微信客服
0516-6662 4183
立即获取方案或咨询
top
